<template>
  <div class="wechat-callback">
    <div class="loading-container">
      <svg class="wechat-logo" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
        <path d="M601.9 458.3c-19.7 0-35.7-16-35.7-35.7s16-35.7 35.7-35.7 35.7 16 35.7 35.7-16 35.7-35.7 35.7zM422.1 458.3c-19.7 0-35.7-16-35.7-35.7s16-35.7 35.7-35.7 35.7 16 35.7 35.7-15.9 35.7-35.7 35.7z" fill="#07C160"/>
        <path d="M890.8 626.3c-15.2-15.8-49-39.4-49-39.4 15.2 12.6 33.3 31.7 33.3 31.7 95-95 95-249.4 0-344.4-95-95-249.4-95-344.4 0-95 95-95 249.4 0 344.4 0 0 18.1-19.1 33.3-31.7 0 0-33.8 23.6-49 39.4-9.5 9.5-59.6 95 0 153.6 15.2 15.2 33.3 15.2 49 0 15.2-15.2 33.3-33.3 33.3-33.3 28.5 15.2 59.6 15.2 88.1 0 0 0 18.1 18.1 33.3 33.3 15.2 15.2 33.3 15.2 49 0 59.6-59.6 9.5-144.1 0-153.6zM512 800.1c-158.8 0-285.9-127.1-285.9-285.9S353.2 228.3 512 228.3s285.9 127.1 285.9 285.9-127.1 285.9-285.9 285.9z" fill="#07C160"/>
      </svg>
      <h2>微信登录处理中</h2>
      <p>请稍候，正在验证您的微信账号信息...</p>

      <div class="progress-bar">
        <div class="progress-fill"></div>
      </div>

      <div class="loading-spinner"></div>

      <div class="status-indicator" :class="statusClass">{{ statusMessage }}</div>

      <button v-if="showRetry" class="retry-button" @click="retryWechatLogin">重新尝试</button>

      <p class="hint">如果长时间没有响应，请检查网络连接或重新尝试登录</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()

const statusMessage = ref('正在处理微信登录...')
const statusClass = ref('')
const showRetry = ref(false)

// 处理微信登录回调
const handleWechatCallback = async () => {
  try {
    // 检查是否有错误参数
    const error = route.query.error
    const errorMsg = route.query.error_msg || route.query.msg
    
    if (error || errorMsg) {
      statusMessage.value = '微信登录失败：' + (errorMsg || '未知错误')
      statusClass.value = 'error'
      ElMessage.error('微信登录失败：' + (errorMsg || '未知错误'))
      showRetry.value = true
      return
    }

    // 从URL参数中获取微信登录后的参数
    const userid = route.query.userid
    const username = route.query.username
    const token = route.query.token
    const refreshToken = route.query.refreshToken

    if (!userid || !username || !token || !refreshToken) {
      statusMessage.value = '微信登录失败：缺少必要参数'
      statusClass.value = 'error'
      ElMessage.error('微信登录失败，请重新尝试')
      showRetry.value = true
      return
    }

    statusMessage.value = '登录成功！正在保存用户信息...'
    statusClass.value = 'success'

    // 保存token和用户信息到localStorage
    localStorage.setItem('token', token)
    localStorage.setItem('retoken', refreshToken)
    localStorage.setItem('userInfo', JSON.stringify({
      user_id: userid,
      username: username
    }))

    ElMessage.success('微信登录成功')

    // 延迟跳转让用户看到成功消息
    setTimeout(() => {
      router.push('/')
    }, 1500)

  } catch (error) {
    console.error('微信登录处理失败:', error)
    statusMessage.value = '处理失败: ' + error.message
    statusClass.value = 'error'
    ElMessage.error('微信登录失败，请重试')
    showRetry.value = true
  }
}

// 重新尝试微信登录
const retryWechatLogin = () => {
  showRetry.value = false
  statusMessage.value = '正在重新尝试...'
  statusClass.value = ''
  // 跳转回登录页面重新开始微信登录流程
  router.push('/login')
}

onMounted(() => {
  handleWechatCallback()
})
</script>

<style scoped>
.wechat-callback {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.loading-container {
  width: 100%;
  max-width: 500px;
  text-align: center;
  background: white;
  border-radius: 12px;
  padding: 40px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.loading-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

h2 {
  color: #07C160;
  margin-bottom: 20px;
  font-weight: 600;
}

.loading-container p {
  margin-bottom: 25px;
  color: #666;
  font-size: 16px;
  line-height: 1.5;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(7, 193, 96, 0.1);
  border-top: 4px solid #07C160;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

.status-indicator {
  margin-top: 20px;
  padding: 12px;
  border-radius: 8px;
  background-color: #f9f9f9;
  font-size: 14px;
}

.success {
  color: #07C160;
  background-color: rgba(7, 193, 96, 0.1);
}

.error {
  color: #F56C6C;
  background-color: rgba(245, 108, 108, 0.1);
}

.wechat-logo {
  width: 60px;
  margin-bottom: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.progress-bar {
  height: 6px;
  background-color: #EBEEF5;
  border-radius: 3px;
  overflow: hidden;
  margin: 20px 0;
}

.progress-fill {
  height: 100%;
  background-color: #07C160;
  width: 0%;
  animation: progress 2s ease-in-out infinite;
}

@keyframes progress {
  0% { width: 0%; }
  50% { width: 70%; }
  100% { width: 100%; }
}

.hint {
  font-size: 13px;
  color: #999;
  margin-top: 25px;
}

.retry-button {
  margin-top: 20px;
  background-color: #07C160;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.retry-button:hover {
  background-color: #06ae56;
}
</style>